<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-02-14 18:05:50
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-19 17:54:02
-->
<template>
  <el-select-v2
    ref="selectRef"
    v-model="selectValue"
    :style="selectStyles"
    @change="handleChange"
    v-bind="$attrs"
    @visible-change="handleVisibleChange"
    :remote-show-suffix="$attrs.remote"
    :suffix-icon="$attrs.remote ? h(GIcon, { type: 'c-xian-sousuo' }) : h(CIconArrowBottom)"
    :clear-icon="CloseIcon"
    placeholder="Please select"
  >
    <template #prefix v-if="$slots.prefix">
      <slot name="prefix"></slot>
    </template>
    <slot></slot>
  </el-select-v2>
</template>
<script lang="ts">
import { defineComponent, computed, ref, toRefs, h, PropType } from 'vue';
import { GIcon } from '@/components/GIcon/index';
import { CCloseIcon } from '@/components/CCloseIcon/index';
import { ArrowDown } from '@element-plus/icons-vue';
import CIconArrowBottom from '@/components/CIconArrowBottom/index.vue';

const CloseIcon = defineComponent({
  setup() {
    return () => h(GIcon, { type: 'c-mian-qingkong', style: 'font-size: 14px' });
  }
});

export default defineComponent({
  name: 'GSelectV2',
  props: {
    value: {
      type: [Number, String]
    },
    propOptions: {
      type: Array as PropType<any[]>,
      default: () => {
        return [];
      }
    },
    autoWidth: {
      type: Boolean,
      default: false
    },
    defaultAutoWidth: {
      type: Number,
      default: 104
    },
    maxAutoWidth: {
      type: Number,
      default: 240
    }
  },
  emits: ['update:value', 'change', 'visible-change'],
  setup(props, { emit }) {
    const selectRef = ref();
    const selectValue = computed({
      get: () => {
        return props.value;
      },
      set: (val: any) => {
        emit('update:value', val);
      }
    });
    const getSelectName = (selectVal: any) => {
      if (selectVal) {
        const index = propOptions.value.findIndex((n: any) => n.value === selectVal);
        if (index > -1) {
          selectValueName.value = propOptions.value[index].label;
        }
      } else {
        selectValueName.value = '';
      }
      console.log('getSelectName after', selectValueName.value, selectValueName.value.length);
    };

    const selectValueName = ref('');
    if (props.autoWidth) {
      getSelectName(props.value);
    }

    const { propOptions } = toRefs(props);

    const selectStyles = computed(() => {
      if (!props.autoWidth) return {};
      const len = selectValueName.value ? getStrWidthLen(selectValueName.value) : 0;
      const calcWidth = props.defaultAutoWidth + (len - 4 < 0 ? 0 : len - 4) * 14;
      return {
        width: (calcWidth > props.maxAutoWidth ? props.maxAutoWidth : calcWidth) + 'px'
      };
    });
    const handleChange = (e: any) => {
      console.log('handleChange', e);
      if (props.autoWidth) {
        getSelectName(e);
      }
      emit('change', e);
    };

    function handleVisibleChange(...e: any) {
      emit('visible-change', ...e);
    }

    function getStrWidthLen(str: string): number {
      let totalLength = 0;
      let charCode;
      for (var i = 0; i < str.length; i++) {
        charCode = str.charCodeAt(i);
        // 单字节字符（数字、字母）
        if (charCode < 0x007f) {
          totalLength += 0.5;
        } else {
          totalLength += 1;
        }
      }
      return Math.ceil(totalLength);
    }
    const blur = () => {
      selectRef.value.blur();
    };
    return {
      selectValue,
      selectStyles,
      handleChange,
      handleVisibleChange,
      blur,
      GIcon,
      CCloseIcon,
      ArrowDown,
      CIconArrowBottom,
      CloseIcon,
      h
    };
  }
});
</script>
<style lang="scss" scoped></style>
